<template>
  <div class="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
export default {
  name: "scroll",
  props: {
    handleToScroll: {
      type: Function,
      default: function() {}
    },
    handleToTouchEnd: {
      type: Function,
      default: function() {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      let scroll = new Bscroll(this.$refs.wrapper, {
        tap: true,
        probeType: 1,
        pullDownRefresh: {
          threshold: 50,
          probeType: 3
        }
      });
      this.scroll = scroll;
      scroll.on("scroll", pos => {
        this.handleToScroll(pos);
      });
      scroll.on("touchEnd", pos => {
        this.handleToTouchEnd(pos);
      });
    });
  },
  data() {
    return {};
  },
  methods: {
    toScrollTop(y) {
      this.scroll.scrollTo(0, y);
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 500px;
}
</style>